<template>
  <div>
    <p>该组件主要用于 过滤器, 自定义指令 的使用案例</p>
    <!--    全局组件的使用, 不需要引入, 可以直接使用, 高频使用的组件可以注册为全局组件, 避免频繁引入-->
    <CustomComponent/>
    <hr/>
    <div>
      <!--      全局过滤器使用, 通过管道符 | , 前面的为需要处理的属性, 后面为过滤器函数 -->
      {{ count | customFilter }}
      <br>
      <!--      局部过滤器使用, 通过管道符 | , 前面的为需要处理的属性, 后面为过滤器函数 -->
      {{ msg | localFilterHandler }}
    </div>
    <hr/>
    <div>
      <!--      全局 指令使用,-->
      <p v-custom-directive="color">这里是全局自定义指令: other</p>
      <p v-custom-directive="'red'">指令颜色</p>
      <button @click="changeColor">
        改变other颜色{{msg}}
      </button>
      <hr>
      <div v-local-dir="bgc">自定义指令: another</div>
      <button @click="changeLocalColor">
        改变another颜色
      </button>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';

  @Component({
    name: 'ToolGlobal',
    //组件内指令声明
    directives: {
      localDir: {
        bind(el, binding) {
          el.style.backgroundColor = binding.value
        },
        update(el, binding) {
          el.style.backgroundColor = binding.value
        }
      }
    },
    // 组件内局部过滤器
    filters: {
      //组件内过滤器的声明,其他组件无法使用
      localFilterHandler(val: string) {
        return (val + '--局部过滤器, 在组件内声明使用');
      }
    },
    //生命钩子和data,methods,重名,这里覆盖下面的
    created() {
      console.log('heheh')
    },
    data(){
      return {
        msg: 'lalal'
      }
    }
  })
  export default class ToolGlobal extends Vue {
    count = '过滤器使用';
    color = 'blue';
    msg = 'pppp'
    bgc = '#cdf8ff'

    changeColor() {
      this.color = 'pink'
    }

    changeLocalColor() {
      this.bgc = '#ffc7ca'
    }
  };
</script>

<style scoped>

</style>
